<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://gitee.com/xmo/mineadmin-vue
-->
<template>
    <div
        class="auth-container flex justify-center items-center"
        :style="`background-color: ${
            appStore.mode == 'light' ? '#ebedf1' : '#242424'
        }`"
    >
        <div class="auth-panel">
            <div class="flex text-2xl justify-center mt-5 title">
                <img :src="`${$url}logo.svg`" width="56" class="mr-2" />
                <div class="mt-0.5">Api Document</div>
            </div>
            <a-form
                :model="form"
                layout="vertical"
                class="mt-3 p-5"
                @submit="submit"
                ref="formRef"
            >
                <a-form-item
                    label="APP ID"
                    field="app_id"
                    :rules="[{ required: true, message: 'APP ID必填' }]"
                >
                    <a-input
                        v-model="form.app_id"
                        placeholder="请输入 APP ID"
                    />
                </a-form-item>
                <a-form-item
                    label="APP SECRET"
                    field="app_secret"
                    :rules="[{ required: true, message: 'APP SECRET必填' }]"
                >
                    <a-input-password
                        v-model="form.app_secret"
                        placeholder="请输入 APP SECRET"
                    />
                </a-form-item>
                <a-form-item class="mt-2">
                    <a-button
                        long
                        type="primary"
                        size="large"
                        html-type="submit"
                        >登录文档</a-button
                    >
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>

<script setup>
import { nextTick, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useAppStore, useDocStore } from '@/store';
import doc from '@/api/doc';

const appStore = useAppStore();
const docStore = useDocStore();
const router = useRouter();
const route = useRoute();
const form = ref({ app_id: '', app_secret: '' });
const formRef = ref();

const submit = ({ values, errors }) => {
    if (errors) return false;
    formRef.value.validate().then(() => {
        docAuth(values);
    });
};

const docAuth = (data) => {
    doc.login(data).then((res) => {
        if (res.success && res.code == 200) {
            docStore.appId = data.app_id;
            docStore.appSecret = data.app_secret;
            docStore.auth = true;
            nextTick(async () => {
                try {
                    await router.push({ name: 'interfaceList' });
                } catch (error) {
                    if (error.isNavigationFailure) {
                        // 处理导航失败的情况
                        console.error(
                            'Navigation failed due to permissions',
                            error
                        );
                    } else {
                        proxy.$message.error('没有权限');
                    }
                }
            });
        }
    });
};

if (route.query.app_id && route.query.app_secret) {
    form.value.app_id = route.query.app_id;
    form.value.app_secret = route.query.app_secret;
    docAuth(form.value);
}
</script>

<style scoped>
.auth-container {
    background-image: url(/auth-bg.svg);
    background-size: cover;
    height: 100%;
}
.auth-panel {
    width: 380px;
    background: var(--color-bg-2);
    backdrop-filter: blur(10px);
    height: 355px;
    border-radius: 6px;
    padding: 10px;
    box-shadow: 0 0 5px var(--color-fill-4);
}
.title {
    color: var(--color-text-1);
}
</style>
